import React, { useState, useEffect } from 'react';
import { NumberKeyboard, Modal, Toast, NavBar, Button, Space } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';
import { useLocation } from 'react-router-dom'
const Payment = () => {

    const location = useLocation()
    const { totalprice } = location.state

    const correctPassword = '1234'; // 正确密码
    const [password, setPassword] = useState(''); // 用户输入的密码
    const [loading, setLoading] = useState(false); // 控制 Loading 状态
    const [modalVisible, setModalVisible] = useState(false); // 控制支付成功弹窗
    const [keyboardVisible, setKeyboardVisible] = useState(false); // 控制数字键盘显示

    const navigate = useNavigate();

    const back = () => {
        navigate('/pays');
    };

    // 处理密码输入
    const handleInput = (value) => {
        if (password.length < 4) {
            setPassword((prevPassword) => prevPassword + value);
        }
    };

    // 处理删除操作
    const handleDelete = () => {
        setPassword((prevPassword) => prevPassword.slice(0, -1));
    };

    // 验证密码
    const validatePassword = () => {
        if (password === correctPassword) {
            setLoading(true); // 显示 Loading
            setTimeout(() => {
                setLoading(false);
                setModalVisible(true); // 显示支付成功弹窗
            }, 1000); // 模拟 1 秒 Loading
        } else {
            Toast.show({
                icon: 'fail',
                content: '密码错误',
              })// 提示密码错误
            setPassword(''); // 清空密码
        }
    };

    // 监听密码长度变化，自动验证
    useEffect(() => {
        if (password.length === 4) {
            validatePassword();
        }
    }, [password]); // 当 password 变化时触发

    // 关闭弹窗并跳转到主页
    const handleModalClose = () => {
        setModalVisible(false);
        navigate('/tar/shou'); // 跳转到主页
    };

    return (
        <div style={{ padding: '20px', textAlign: 'center' }}>
            <NavBar back='订单支付' onBack={back} />

            <div style={{ margin: '20px 0', fontSize: '18px' }}>请输入支付密码</div>

            {/* 自定义密码输入框 */}
            <div
                style={{
                    display: 'flex',
                    justifyContent: 'center',
                    margin: '20px 0',
                }}
                onClick={() => setKeyboardVisible(true)} // 点击输入框显示数字键盘
            >
                {Array.from({ length: 4 }).map((_, index) => (
                    <div
                        key={index}
                        style={{
                            width: '40px',
                            height: '40px',
                            border: '1px solid #ddd',
                            borderRadius: '4px',
                            margin: '0 5px',
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                            fontSize: '18px',
                            backgroundColor: '#f5f5f5',
                        }}
                    >
                        {password[index] ? '*' : ''} {/* 显示圆点 */}
                    </div>
                ))}
            </div>

            {/* 数字键盘 */}
            <NumberKeyboard
                visible={keyboardVisible}
                onInput={handleInput}
                onDelete={handleDelete}
                onClose={() => setKeyboardVisible(false)}
            />

            {/* Loading 状态 */}
            {loading && (
                <div style={{ margin: '20px 0', fontSize: '16px' }}>支付中...</div>
            )}

            {/* 支付成功弹窗 */}
            <Modal
                visible={modalVisible}
                content={
                    <div style={{ textAlign: 'center' }}>
                        <div style={{ fontSize: '18px', marginBottom: '20px' }}>支付成功！</div>
                        <Space direction='vertical' style={{ width: '100%' }}>
                            <Button color='primary' onClick={() => navigate('/see',{state: {totalprice:totalprice,}})} className='Sees'>
                                查看详情
                            </Button>
                            <Button color='primary' onClick={() => navigate('/tar/xiaoxi/liao')} className='Sees'>
                                联系工作人员
                            </Button>
                        </Space>
                    </div>
                }
                closeOnAction
                onClose={handleModalClose}
                actions={[
                    {
                        key: 'close',
                        text: '关闭',
                        onClick: handleModalClose,
                    },
                ]}
            />
        </div>
    );
};

export default Payment;